<template>  
  <div class="main-nav">
    <router-link class="main-nav-item" :class="{ selected : active == '首页' }" to="/">
      <div class="my-icon-home"></div>
      <p>首页</p>
    </router-link>
    <!-- <router-link class="main-nav-item" :class="{ selected : active == '赛事' }" to="/match">
      <div class="my-icon-cup"></div>
      <p>赛事</p>
    </router-link> -->
    <router-link class="main-nav-item" :class="{ selected : active == '俱乐部' }" to="/club">
      <div class="my-icon-club"></div>
      <p>俱乐部</p>
    </router-link>
    <router-link class="main-nav-item" :class="{ selected : active == '会员列表' }" to="/member">
      <div class="my-icon-member"></div>
      <p>会员列表</p>
    </router-link>
    <router-link class="main-nav-item" :class="{ selected : active == '我' }" to="/my">
      <div class="my-icon-my"></div>
      <p>我</p>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'mainNav',
  props:['active'],
  data () {
    return {}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- <style scoped> 
</style> -->
